<template>
  <div class="theme-switcher">
    <el-tabs v-model="activeTabData" @tab-click="handleClick">
      <el-tab-pane
        :label="value.text"
        :name="value.id + 'active'"
        :key="value.id"
        v-for="value in medicalResponse"
      >
        <div class="modal-body">
          <div
            class="category"
            v-for="category in value.children"
            :key="category"
          >
            <div class="symptom-container">
              <span class="category-title">{{ category.text }}</span>
              <div class="symptom-container-1">
                <div
                  class="symptom"
                  v-for="symptom in category.children"
                  :key="symptom.text || symptom"
                  @click="selectSymptom(symptom, category)"
                >
                  <label
                    style="padding: 0 12px; cursor: pointer"
                    :for="`${symptom.text}`"
                    >{{ symptom.text }}</label
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

      <div class="modal-footer" >
        <el-button @click="closeDel" type="danger" color="#F3222D">
          <img
            src="@/assets/icon/icon_huitui_nor.svg"
            alt=""
            style="vertical-align: middle"
          />
          <span style="vertical-align: middle; margin-left: 5px">回退</span>
        </el-button>
        <el-button @click="closeModal" type="primary" color="#16ADA4">
          <img
            src="@/assets/icon/icon_close2_nor (1).svg"
            alt=""
            style="vertical-align: middle"
          />
          <span style="vertical-align: middle">关闭</span>
        </el-button>
      </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import type { TabsPaneContext } from 'element-plus';
const emits = defineEmits(['onClose', 'onSymptom','onCloseDel']);
const symptomList = defineProps<{ medicalList: any }>();
const medicalList = ref(symptomList.medicalList || []);
const activeTabData = ref('');
interface MedicalTab {
  fieldCode: string;
  text: string;
  children: any[];
  id: string;
}
const medicalResponse = ref<MedicalTab[]>([]);
watch(
  symptomList,
  (newVal) => {
    if (newVal && newVal.medicalList) {
      // 处理新的症状列表
      medicalResponse.value = newVal.medicalList.treeList;
      //console.log(newVal.medicalList.treeList);

      if (newVal.medicalList.treeList[0]) {
        activeTabData.value = newVal.medicalList.treeList[0].id + 'active'; // 默认选中第一个tab
      } else {
        activeTabData.value = '';
      }
    }
  },
  { immediate: true }
);

// 选中集合（可多选，按需改成单选）
const selectedSymptoms = ref<Set<string>>(new Set());
const isSelected = (symptom: any) => {
  const key = symptom?.text ?? symptom;
  return selectedSymptoms.value.has(key);
};
const closeDel = () => {
  emits('onCloseDel');
};
const selectSymptom = (symptom: any, category: any) => {
  const key = symptom?.text ?? symptom;
  if (selectedSymptoms.value.has(key)) {
    selectedSymptoms.value.delete(key);
  } else {
    selectedSymptoms.value.add(key);
  }
  // 派发当前全部选中项；如父组件期望单值，可改为 emits('onSymptom', key)
  emits('onSymptom', [symptom],category);
};
const closeModal = () => {
  // 这里可以添加关闭模态框的逻辑，例如触发一个事件让父组件关闭它
  emits('onClose');
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeTabData.value = '';
  // activeTab.value = String(tab.props.name); // 更新当前选中的模板类型
  //console.log(activeTabData.value);
};
</script>

<style lang="scss" scoped>
.theme-switcher {
  width: 900px;
  height: 325px;
  background: #ffffff;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1),
    0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 14px 2px rgba(0, 0, 0, 0.05);
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #dcdcdc;
}
.table-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.row {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
}

.cell {
  flex: 1;
  padding: 10px;
  text-align: center;
  &:last-child {
    border-right: none;
  }
}

.close-button {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.modal-body {
  padding: 10px;
  height: 240px;
  overflow: auto;
}

.category {
  margin-bottom: 10px;

  &-title {
    font-weight: bold;
    display: block;
    padding-left: 10px;
    width: 80px;
  }
}

.symptom-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  &-1 {
    display: flex;
    width: calc(100% - 145px);
    flex-wrap: wrap;
    gap: 0px;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    margin-left: 20px;
    padding-bottom: 10px;
  }
}

.symptom {
  margin-bottom: 5px;
  display: flex;
  align-items: center;

  input[type='checkbox'] {
    margin-right: 5px;
  }
}

// hover 与选中高亮
.symptom:hover label {
  color: #16ada4;
}
label.selected {
  color: #16ada4;
  font-weight: 600;
}

.modal-footer {
  padding: 10px;
  text-align: center;
  border-top: 1px solid #ccc;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #16ada4;

  height: 46px;
  background: #f8f9fa;
  border-radius: 0px 0px 12px 12px;
  border: 1px solid #e7e7e7;
  cursor: pointer;
  overflow: auto;
  .close-btn {
    padding: 5px 10px;
    background-color: #ccc;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
}
::v-deep(.el-tabs__item) {
  width: 80px !important; /* 设置每个tab的宽度 */
  padding: 0 !important;
}
</style>
